<template>
  <div class="box">
    <el-upload
        ref="uploadRef"
        class="upload-demo"
        :action="URL+'sub/file?type='+porps.type+'&fileName='+fileName"
        :before-upload="handelBefore"
        :auto-upload="false"
    >
     <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>

    <el-button class="btn" type="success" @click="submitUpload">
     上传文件
    </el-button>
    </el-upload>
  </div>
</template>

<script setup>
import {reactive, ref, inject} from 'vue'

const url = inject("$baseURL").slice(0, -4) + '101/'
const URL = ref(url)
const porps = defineProps(['type'])

const fileName = ref("")
const $emit = defineEmits(['getName'])

const uploadRef = ref()

const submitUpload = () => {

  uploadRef.value.submit()
}


const handelBefore = (file) => {
  var flag = true
  var type = porps.type
  if (type == 'pdf' && file.type == 'application/pdf') {

  } else if (type == 'ppt' && file.type == "application/pdf") {
  } else if (type == 'mp4' && file.type.slice(0, 5) == 'video') {
  } else if(type=="any"){}
  else{
    flag = false
    ElMessage.error('文件格式错误')
  }
  if (flag) {
    fileName.value = file.uid
    console.log(fileName.value)
    $emit('getName', fileName)
    return true
  }
  return false

}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}

.btn {
  margin-left: 10px;
}
</style>